<template>
  <div class="recipeDoctorEdit">
    <Modal v-model="isView"
           :mask-closable="false"
           :title="title"
           :footer-hide="true">
      <el-form :model="formModel"
               label-position="right"
               label-width="140px"
               :rules="formRules"
               ref="formRefs">
        <el-form-item label="医院："
                      prop="hospitalId">
          <el-select v-model="formModel.hospitalId"
                     placeholder="请选择医院"
                     filterable
                     remote
                     reserve-keyword
                     clearable
                     :remote-method="(query) => {remoteMethod(query, 'hospital')}"
                     :loading="loading"
                     class="w-200"
                     @change="val=>handleSelect(val, 'hospital')">
            <el-option v-for="item in hospitalFilterList"
                       :key="item.id"
                       :label="item.name"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处方医生："
                      prop="doctorId">
          <el-select v-model="formModel.doctorId"
                     placeholder="请选择处方医生"
                     filterable
                     remote
                     reserve-keyword
                     clearable
                     :remote-method="(query) => {remoteMethod(query, 'doctor')}"
                     :loading="loading1"
                     class="w-200"
                     @change="val=>handleSelect(val, 'doctor')">
            <el-option v-for="item in doctorFilterList"
                       :key="item.id"
                       :label="item.nickName"
                       :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <p align="center">
        <el-button @click="isView = false">取 消</el-button>
        <el-button type="primary"
                   @click="handleSave">保 存</el-button>
      </p>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "recipeDoctorEdit",
    data () {
      return {
        title: '新 增',
        isView: false,
        hospitalFilterList: [],
        hospitalList: [],
        doctorFilterList: [],
        doctorList: [],
        loading: false,
        loading1: false,
        formModel: {
          id: 0,
          hospitalId: '',
          doctorIds: [],
          doctorId: ''
        },
        formRules: {
          hospitalId: [
            { required: true, message: '请选择医院', trigger: ['blur', 'change'] }
          ],
          doctorId: [
            { required: true, message: '请选择处方医生', trigger: ['blur', 'change'] }
          ],
        }
      }
    },
    methods: {
      // 远程搜索
      remoteMethod (query, type) {
        if (query !== '') {
          let _this = this;
          if (query) {
            if (type === 'hospital') {
              _this.loading = true; // 锁住
              this.post(this.api.searchHospital, {
                pageSize: 20,
                pageStart: 0,
                name: query
              }).then(res => {
                if (res.data.code === '200') {
                  _this.loading = false;
                  _this.hospitalList = res.data.object;
                }
              })
              setTimeout(() => {
                _this.loading = false;
                _this.hospitalFilterList = _this.hospitalList.filter(item => item.name.indexOf(query) > -1);
              }, 200);
            }
            if (type === 'doctor') {
              _this.loading1 = true; // 锁住
              this.post(this.api.doctorManager.selectDoctorInfoByPhone, {
                phone: query
              }).then(res => {
                if (res.data.code === '200') {
                  _this.loading1 = false;
                  _this.doctorList = res.data.object;
                }
              })
              setTimeout(() => {
                _this.loading1 = false;
                _this.doctorFilterList = _this.doctorList;
              }, 200);
            }
          } else {
            if (type === 'hospital') {
              this.hospitalFilterList = [];
            }
            if (type === 'doctor') {
              this.doctorFilterList = [];
            }
          }
        }
      },
      handleSelect (item, type) {
        if (type === 'hospital') {
          this.formModel.hospitalId = item;
        }
        if (type === 'doctor') {
          this.formModel.doctorIds = item;
        }
      },

      openView (row) {
        this.isView = true;
        this.$refs['formRefs'].resetFields();
        if (row) {
          this.title = '编 辑';
          this.formModel = Object.assign({ doctorIds: [] }, row);
          this.hospitalFilterList = [{ id: row.hospitalId, name: row.hospitalName }];
          this.formModel.doctorId = row.doctorId;
          this.doctorFilterList = [{ id: row.doctorId, nickName: row.nickName }];
        } else {
          this.formModel = {
            id: 0,
            hospitalId: '',
            doctorIds: []
          }
        }
      },

      handleSave () {
        this.$refs['formRefs'].validate((valid) => {
          this.formModel.doctorIds.push(this.formModel.doctorId);
          if (valid) {
            this.post(this.api.recipeDoctorEdit.url, this.formModel).then(res => {
              if (res.data.code === '200') {
                this.$message.success('保存成功');
                this.isView = false;
                this.$emit('getList');
              }
            })

          }
        })
      }
    },
  }
</script>

<style scoped>
  .el-select--small {
    width: 100%;
  }
</style>

